<template>
  <teleport to="body">
    <autoDialog :title="title" @close="emits('close')">
      <div class="tconten">
        <div class="list">
          <span class="title">名称：</span>
          <darkInput
            v-model="markname"
            placeholder="请输入名称"
            style="flex: 1; border: 1px solid #b9eeff"
          />
        </div>
        <div class="list">
          <span class="title">描述：</span>
          <textarea name="" id="area"></textarea>
        </div>
        <div class="list" style="margin-bottom: 15px">
          <span class="title">展示样式：</span>
          <img :src="pointStyle" alt="" style="width: 32px; height: 32px" />
          <el-popover placement="right" :width="390" popper-class="mypopover">
            <template #reference>
              <el-button
                type="primary"
                class="select"
                @click="visible = true"
                style="margin-left: 15px"
                >选择样式</el-button
              >
            </template>
            <div
              v-for="item in imgData"
              @click="selectStyle(item.url)"
              :key="item.id"
              style="
                width: 100px;
                margin-right: 12px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                margin-top: 10px;
              "
            >
              <img :src="item.url" alt="" style="width: 32px; height: 32px; object-fit: contain" />
              <span>{{ item.url.match(regex)[1] }}</span>
            </div>
          </el-popover>
        </div>
        <div class="list">
          <span class="title">文字颜色：</span>
          <el-color-picker v-model="linecolor" />
          <span class="title" style="margin-left: 15px">文字大小：</span>
          <darkInput
            v-model="textsize"
            min="20"
            type="number"
            style="flex: 1; border: 1px solid #b9eeff"
          />
        </div>
        <div class="list">
          <span class="title">文字内容：</span>
          <darkInput
            v-model="textcontent"
            placeholder="请输入名称"
            style="flex: 1; border: 1px solid #b9eeff"
          />
          <!-- <el-input v-model="textcontent" style="  background: transparent;" /> -->
        </div>
        <div class="list" style="margin-bottom: 15px">
          <!-- <span class="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> -->
          <el-button type="primary" class="btn-upload" @click="openFileDialog(1)"
            >添加图片</el-button
          >
          <el-button type="primary" class="btn-upload" @click="openFileDialog(2)"
            >添加视频</el-button
          >
        </div>
        <el-upload
          v-model:file-list="fileList"
          ref="uploadRef"
          action="http://www.dataxiu.com:48080/admin-api/infra/file/upload"
          :auto-upload="false"
          :accept="accetpType === 1 ? validImageTypes : validVideoTypes"
          list-type="picture-card"
        >
          <template #file="{ file }">
            <div>
              <img
                class="el-upload-list__item-thumbnail"
                v-if="file.raw.type.startsWith('image')"
                :src="file.url"
                alt=""
              />
              <video
                ref="videoRef"
                :src="file.url"
                v-if="file.raw.type.startsWith('video')"
                muted
                autoplay
              ></video>
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                  <img src="/static/assets/3d/del.png" alt="" />
                </span>
              </span>
            </div>
          </template>
        </el-upload>
        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
        <hr />
        <div style="margin-top: 30px; display: flex; justify-content: end">
          <el-button type="primary" class="add" @click="submitUpload">新增</el-button>
          <el-button align="right" class="confim" type="primary" @click="cancel">取消</el-button>
        </div>
      </div>
    </autoDialog>
  </teleport>
</template>  
       
      
      <script setup>
import { ref, defineProps, defineEmits, onMounted } from 'vue'
import { useDraggable } from '../../../../../hook/useDraggable'
import { addSysmMapMark } from '../../../../../api/sysmapmark'
import { useMapStoreStore } from '../../../../../stores/index'
import imgDataArr from '../../../aside/components/img'
// eslint-disable-next-line vue/require-prop-types
const props = defineProps(['title', 'toolChildrenId', 'nowentity'])
const emits = defineEmits(['close', 'updateEntity'])
const store = useMapStoreStore()
let regex = /\/([^\/]+)\.\w+$/
const imgData = imgDataArr
const visible = ref(false)
const pointStyle = ref('/static/icon/poi.png')
const selectStyle = (e) => {
  pointStyle.value = e
  visible.value = false
}

const linecolor = ref('#ffa430')
const textcontent = ref('文字标注')
const textsize = ref(26)

const fileList = ref([])
const uploadRef = ref(null)
const accetpType = ref(-1)
const validImageTypes = ['image/jpeg', 'image/png', 'image/gif']
const validVideoTypes = ['video/mp4', 'video/avi', 'video/mov']

const openFileDialog = (i) => {
  accetpType.value = i
  setTimeout(() => {
    uploadRef.value.$el.querySelector('input').click()
  }, 0)
}

const handleRemove = (file) => {
  const index = fileList.value.indexOf(file)
  if (index > -1) {
    fileList.value.splice(index, 1)
  }
}

watch(
  () => linecolor.value,
  (newval) => {
    map3d.changeNowMarkItem(props.nowentity, { color: newval })
  }
)

watch(
  () => textcontent.value,
  (newval) => {
    map3d.changeNowMarkItem(props.nowentity, { text: newval })
  }
)

watch(
  () => textsize.value,
  (newval) => {
    console.log(newval, props.nowentity)

    map3d.changeNowMarkItem(props.nowentity, { font_size: newval })
  }
)

const markname = ref('')
const submitUpload = () => {
  if (markname.value === '') {
    ElMessage({
      message: '请输入标注名称',
      type: 'warning',
      plain: true
    })
    return
  }
  let formData = new FormData()
  let option = props.nowentity.toGeoJSON()
  option.properties.marktype = 'mark-poi'
  option.properties.marktypes = '文字'

  formData.append('markName', markname.value)
  formData.append('markType', '文字')
  formData.append('markExt', JSON.stringify(option))
  formData.append('markStyle', JSON.stringify({ text: textcontent.value,size:textsize.value, color: linecolor.value,img:pointStyle.value }))
  formData.append('earthquakeId', store.eqid)
  for (const item of fileList.value) {
    formData.append('files', item.raw)
  }

  addSysmMapMark(formData).then((e) => {
    ElMessage({
      message: '上传成功',
      type: 'success',
      plain: true
    })
    store.markFlag = !store.markFlag
    emits('close')
  })
}

const cancel = () => {
  emits('close')
}
</script>  
        
      <style lang="scss" scoped>
:deep(.el-upload--picture-card) {
  display: none;
}
:deep(.el-upload-list__item) {
  width: 100px;
  height: 100px;
}
:deep(.el-upload-list__item-preview) {
  display: none !important;
}
:deep(.el-upload-list__item-delete) {
  margin-left: 0 !important;
}
.select {
  border-radius: 4px;
  opacity: 1;
  background: rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
  border: 1px solid #b9eeff;
  height: 32px;
}
.btn-upload {
  width: 168px;
  height: 32px;
  border-radius: 4px;
  opacity: 1;

  background: linear-gradient(90deg, #3f97f0 0%, #004083 99%);
}
.add {
  width: 92px;
  height: 40px;
  border-radius: 4px;
  opacity: 1;

  background: linear-gradient(90deg, #3f97f0 3%, #003f82 99%);
}
.confim {
  width: 92px;
  height: 40px;
  border-radius: 4px;
  opacity: 1;

  box-sizing: border-box;
  border: 1px solid #b9eeff;
  background-color: transparent;
}

.list {
  display: flex;
  margin-bottom: 15px;
  align-items: center;

  .title {
    display: inline-block;
    margin-right: 5px;
  }
}
.imgandvideo {
  display: flex;
  flex-wrap: wrap;

  .thumbnail-item {
    position: relative;
    margin: 5px;
    width: 100px;
    height: 100px;
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
  .icon-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .icon-container:hover {
    background-color: #62666a8f;
    opacity: 1;
  }
}

.draggable-container {
  width: 450px;
  background-size: 100% 100%;
  color: #ffffff;
  z-index: 99;
  color: #b9eeff;
  background-color: rgba(0, 25, 51, 0.8);
  border: 1px solid #0e9cff;
  position: fixed;
  left: 65px;
  top: 125px;
  border-radius: 4px;
}

#area {
  flex: 1;
  min-height: 120px;
  background-color: rgba(0, 25, 51, 0.8);
  border-radius: 4px;
  border: 1px solid #0e9cff;
  color: #b9eeff;
  font-size: 16px;
  padding: 10px;
  border: 1px solid #b9eeff;
  outline: none;
}
.draggable-title {
  cursor: grab;
  user-select: none;
  height: 35px;
  line-height: 35px;
  padding-left: 35px;
  display: flex;
  background-color: #0c69e2;
  border-bottom: 1px solid #fff;
}

.close {
  position: absolute;
  right: 9px;
  top: 9px;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
</style>